<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<!-- 这是后台消毒记录列表 -->
<template>
	<view>
		<!-- 列表项循环 -->
		<block v-for="(item, index) in list" :key="index">
			<!-- 列表项 -->
			<view class="item" @click="toContent(item._id)">
				<!-- 地址和时间 -->
				<view class="item-left">
					<!-- 地址 -->
					<view class="address">{{item.disinfect_location.address}}</view>
					<!-- 时间和负责人 -->
					<view class="time-person">
						<!-- 时间 -->
						<view>
							<image class="img-ico" src="../../../static/timeico.png" mode="aspectFill"></image>
							<text class="time">{{item.creat_time.text}}</text>
						</view>
						<!-- 负责人 -->
						<view>
							<image class="img-ico1" src="../../../static/user.png" mode="aspectFill"></image>
							<text class="person">{{item.user_name}}</text>
						</view>
					</view>
				</view>
				<!-- 缩略图 -->
				<!-- <view class="item-right">
					<image :src="item.disinfect_img[0]+'?x-oss-process=image/resize,w_100'" mode="aspectFill" class="img"></image>
				</view> -->
			</view>
			<view class="line"></view>
		</block>
		<!-- 加载更多 -->
		<view class="load-more">{{loadtext}}</view>
		<!-- 悬浮登记按钮 -->
		<template v-if="visible">
			<uni-fab
				:pattern="pattern"
				:content="content"
				horizontal="right"
				vertical="bottom"
				:popMenu="false"
				@fabClick="register"
			></uni-fab>
		</template>
	</view>
</template>

<script>
	import app from '@/common/app.js';
	import fab from '@/components/uni-fab/uni-fab.vue'
	export default {
		components: {
			fab
		},
		data() {
			return {
				// 是否有更多数据
				isMore: true,
				// 按钮显示
				visible: true,
				// 当前页
				page: 0,
				// 加载文字
				loadtext: '加载中···',
				// 数据列表
				list: [],
				// 加号样式
				pattern: {
					buttonColor: '#6DDDCB'
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			// 首次获取数据
			// this.isMore = true
			this.page = 0;
			this.getData();
		},
		//监听页面滚动
		onPageScroll(e){
			// console.log(e)
			if(e.scrollTop==0){
				this.ctrlBtn();
			}
		},
		// 监听触底动作
		onReachBottom(){
			this.loadmore();
		},
		methods: {
			// 添加
			register() {
				uni.navigateTo({
					url: '/pages/disinfect/content/content'
				})
			},
			// 获取列表数据
			getData() {
				app.callFunction('get_disinfect',
					{
						"offset": this.page * 10
					}, (data, e) => {
					if(this.page==0){
						this.list = [];
					}
					// 获取一次，页码增加一次
					this.page++
					// 将新的数据存入数据列表
					this.list = this.list.concat(data)
					console.log(data.length)
					// 当记录条数小于7时，则为最后一页数据
					if (data.length < 10) {
						this.loadtext = '所有记录均已显示'
						this.isMore = false
					}
				})
			},
			// 上拉加载更多
			loadmore() {
				// 当第一次执行上拉加载时，使发布按钮隐藏
				if (this.visible) {
					this.visible = false
				}
				console.log(this.isMore)
				// 当还存在数据时，再次加载数据
				if (this.isMore) {
					console.log(111)
					this.getData()
				}
			},
			// 控制按钮显示隐藏
			ctrlBtn() {
				this.visible = true
			},
			// 跳转详情页
			toContent(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/disinfect/content/content?id=' + id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.img-ico,
	.img-ico1 {
		width: 15px;
		height: 15px;
		margin-right:5px;
		margin-top: 10px;
	}
	.img-ico1 {
		margin-left: 100rpx;
	}
	// 字体大小
	.fz-30 {
		font-size: 30rpx;
	}
	.fz-44 {
		margin: 0 30rpx;
		font-size: 44rpx;
	}
	// 每一个列表项
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		padding: 30rpx 40rpx;
		// 列表项的左边
		.item-left {
			position: relative;
			width: 750rpx;
			height: 50px;
			// 列表项的地址
			.address {
				font-size: 30rpx;
				color: #333;
			}
			// 列表项的时间和负责人
			.time-person {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				bottom: 0;
				.time,
				.person {
					height: 30rpx;
					font-size: 27rpx;
					color: #ccc;
				}
			}
		}
		// 列表项的右边
		.item-right {
			// 列表项的缩略图
			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 25rpx;
			}
		}
	}
	// 列表项分割线
	.line{
		width: 750rpx;
		height: 1px;
		transform: scaleY(0.3);
		background-color: rgba(0,0,0,0.5);
	}
	.icons {
		margin-right: 10rpx;
		color: #6DDDCB;
	}
	// 加载更多
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
</style>

